<template>
    <div>
      <div class="header">
        <h1 class="headerLogo"><a title="膳食服务" target="_blank" href="http://sc.chinaz.com/"><img alt="logo" src="../../static/img/logo.png"></a></h1>
      </div>

      <div class="banner">

        <div class="login-aside">
          <div id="o-box-up"></div>
          <div id="o-box-down"  style="table-layout:fixed;">

            <form class="registerform" >
              <div class="fm-item">
                <label  class="form-label"><span>登陆账号：</span> <span style="margin-left: 100px"><router-link to="/userRegister">注册账号</router-link></span></label>

                <input type="text" value="" v-model="userLoginData.username" maxlength="100" id="username" class="i-text"   datatype="s6-18" errormsg="用户名至少6个字符,最多18个字符！"  >
                <div class="ui-form-explain"></div>
              </div>

              <div class="fm-item">
                <label class="form-label">登陆密码：</label>
                <input type="password" value="" v-model="userLoginData.password" maxlength="100" id="password" class="i-text" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间！">
                <div class="ui-form-explain"></div>
              </div>

<!--              <div class="fm-item pos-r">-->
<!--                <label  class="form-label">验证码</label>-->
<!--                <input type="text" value="输入验证码" maxlength="100" id="yzm" class="i-text yzm" nullmsg="请输入验证码！" >-->
<!--                <div class="ui-form-explain"><img src="../../static/img/userlogin/yzm.jpg" class="yzm-img" /></div>-->
<!--              </div>-->

              <div class="fm-item">
                <label  class="form-label"></label>
                <input type="submit" value="" @click.prevent="userLogin" tabindex="4" id="send-btn" class="btn-login">
                <div class="ui-form-explain"></div>
              </div>

            </form>

          </div>

        </div>

        <div class="bd">
          <ul>
            <li style="background:url(../../static/img/theme-pic1.jpg) #CCE1F3 center 0 no-repeat;"><a target="_blank"></a></li>
            <li style="background:url(../../static/img/theme-pic2.jpg) #BCE0FF center 0 no-repeat;"><a target="_blank"></a></li>
          </ul>
        </div>

        <div class="hd"><ul></ul></div>
      </div>


      <div class="banner-shadow"></div>

      <div class="footer">
        <p>Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" >&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
      </div>
      <div style="display:none"></div>
    </div>
</template>

<script>
    export default {
        name: "UserLogin",
        data(){
          return {
            userLoginData:{
              username:"",
              password:""
            }
          }
        },
        methods:{
          userLogin(){
            let param="username="+this.userLoginData.username+"&password="+this.userLoginData.password;
            this.$http.post("user/login",param).then(resp=>{
              if(resp.data.code==200){
                this.$message({
                  showClose: true,
                  message: resp.data.message,
                  type: 'success'
                });
                localStorage.setItem("userInfo",JSON.stringify(resp.data.data))
                if(resp.data.data.roleName=='user'){
                  this.$router.push("/list");
                }else{
                  this.$router.push("/systemMain")
                }

              }
            })
          }
        }
    }
</script>

<style scoped>
  @import url("../../static/css/demo.css");
  @import url("../../static/css/login.css");
</style>
